import React, { Component } from 'react'


let caipinArr
let caipinObj

export default class ModelShow extends Component {
  state = {
    caipin_ids:[]
  }

  componentDidMount() {
    caipinArr = [...this.props.caipinData]
    caipinObj = { ...this.props.caiObj }
    // console.log(this.props.caiObj)
    // console.log(this.props.caipinData)
    this.handleCaipin()
  }

  handleCaipin = () => {
    let caipin = { ...caipinObj}
    let totalPrice = 0
    let arr = caipin.caipin_ids.split(',')
    let arrs = []
    arr.map((oj) => {
      caipinArr.map((its) => {
        if (oj === its.id + '') {
          let obs = { foodname: '', price: '' }
          obs.foodname = its.foodname
          obs.price = its.price
          arrs.push(obs)
        }
      })
    })
    caipin.caipin_ids = arrs

    arrs.map(price=>{
      totalPrice += price.price*1
    })
    totalPrice = "￥" + totalPrice.toFixed(2)
    caipin.total_price = totalPrice
    
    this.setState(caipin)
  }

  render() {

    return (
      <div>
        <div className="modal fade in" id="modal-default" style={{ display: "block", paddingRight: 17 }}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button onClick={this.props.hideCaidan} type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span></button>
                <h4 className="modal-title">账单信息</h4>
              </div>
              <div className="modal-body">

                <div className="row margin">
                  <label className="col-sm-2 control-label">订单号</label>
                  <div className="col-sm-10">
                    <span>{this.state.dingdan_num}</span>
                  </div>
                </div>

                <div className="row margin">
                  <label className="col-sm-2 control-label">桌号</label>
                  <div className="col-sm-10">
                    <span>{this.state.desk_num}</span>
                  </div>
                </div>

                <div className="row margin">
                  <label className="col-sm-2 control-label">详细信息</label>
                  <div className="col-sm-10" style={{ overflow: "auto", height: 100 }}>
                    <table className="table table-hover no-margin">
                      <thead>
                        <tr>
                          <th>菜品</th>
                          <th>价格</th>
                        </tr>
                      </thead>
                      <tbody>
                        {
                          this.state.caipin_ids.map((caipin,index)=>(
                            <tr key={'caipintr_' + index}>
                              <td>{caipin.foodname}</td>
                              <td>{caipin.price}</td>
                            </tr>
                          ))
                        }
                      </tbody>
                    </table>
                  </div>
                </div>

                <div className="row margin">
                  <label className="col-sm-2 control-label">总金额</label>
                  <div className="col-sm-10">
                    <h3>{this.state.total_price}</h3>
                  </div>
                </div>

              </div>
              <div className="modal-footer">
                <button onClick={this.props.hideCaidan} type="button" className="btn btn-default pull-left">关闭</button>
                {this.state.status === 0 && <button onClick={this.props.payIt.bind(this, this.props.caiObj)} type="button" className="btn btn-primary">结账</button>}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
